<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/price.css">
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<title>飞鸟</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="head w-m clearfix">
			<!-- 已登录 -->
			<div class="logo">
				<img src="./img/flylogo.png" alt="" srcset="">
				<span>飞鸟图库</span>
			</div>
			<div class="info">
				<img src="./img/user.png" alt="">
				<span>尖尖上设计</span>
				<img src="./img/cor.png" alt="" srcset="">
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥52</span>
				<span>在线充值</span>
			</div>
			<!-- 未登录 -->
			<div class="login">
				<span>
					<a href="">登录</a> / <a href="">注册</a>
				</span>
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥0</span>
				<span>在线充值</span>
			</div>
		</div>
		<!-- banner -->
		<div class="banner">
			<div class="user clearfix">
					<div class="uInfo">
							<p>尖尖上设计</p>
							<p>会员用户</p>
						</div>
				<img src="./img/Buser.png" alt="" srcset=""> 
			</div>
		</div>
		<!-- main -->
		<div class="main w-m clearfix">
			<!-- 左侧区域 -->
			<div class="main-l">
				<ul class="side">
					<li class="item" data-type="0">
						<a href="info.html">
							<img src="img/class1.png">
							<span>个人信息</span>
						</a>
					</li>
					<li class="item" data-type="1">
						<a href="down.html">
							<img src="img/down1.png">
							<span>下载记录</span>
						</a>
					</li>
					<li class="item" data-type="2">
						<a href="rechargeRecord.html">
							<img src="img/book1.png">
							<span>充值记录</span>
						</a>
					</li>
					<li class="item active" data-type="3">
						<a href="price.html">
							<img src="img/money2.png">
							<span>价格列表</span>
						</a>
					</li>
					<li class="item" data-type="4">
						<a href="">
							<img src="img/help1.png">
							<span>服务条款</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 右侧区域 -->
			<div class="main-r">
				<div class="title">价格列表</div>
				<ul class="content clearfix">
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j1.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">bigstockphoto</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j2.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">adobe</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j3.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">123Rf</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j4.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">123Rf</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j5.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">站酷</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j6.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">shutterstock</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j7.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">dreamstime</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j8.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">depositphotos</p>
							<p class="line"></p>
						</a>
					</li>
					<li class="item">
						<a href="">
							<p class="p1"><img src="img/j9.png" ></p>
							<p class="p2">1元/张</p>
							<p class="p3">depositphotos</p>
							<p class="line"></p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 底部 -->
		<div class="foot">
			
			<div class="foot-bottom">
					<a href="">COPYRIGHT (©) 2018 版权所有： 飞鸟图库</a>
			</div>
		</div>
		<script src="./layui/layui.js"></script>
		<script>
			layui.use(['laypage', 'layer','jquery'], function(){
            var laypage = layui.laypage
            ,layer = layui.layer;
			var $ = layui.$;
			var arr = [
				{
					img1:'img/class1.png',
					img2:'img/class2.png',
				},
				{
					img1:'img/down1.png',
					img2:'img/down2.png',
				},
				{
					img1:'img/book1.png',
					img2:'img/book2.png',
				},
				{
					img1:'img/money1.png',
					img2:'img/money2.png',
				},
				{
					img1:'img/help1.png',
					img2:'img/help2.png',
				}
			]
			$('.side li').not(".active").hover(function() {
				$(this).addClass('active1');
				$(this).find('img')[0].src = arr[$(this).attr("data-type")].img2;
			}, function() {
				$(this).removeClass('active1');
				$(this).find('img')[0].src = arr[$(this).attr("data-type")].img1;
			})
		})
		</script>
	</body>
</html>
